<!--
 * @Descripttion: 表格选择器组件演示
 * @version: 1.0
 * @Author: sakya
 * @Date: 2021年6月8日09:29:14
 * @LastEditors: sakya
 * @LastEditTime: 2021年6月8日09:29:14
-->

<template>
  <el-main>
    <el-alert
      title="select深度改造的表格选择器, 非常适用于大量数据选择的场景"
      type="success"
      style="margin-bottom:20px;"
    />
    <el-card
      shadow="never"
      header="单选"
    >
      <sc-table-select
        v-model="value2"
        :api-obj="apiObj"
        :params="params"
        :table-width="600"
        :props="props"
        @change="change"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="user"
          label="姓名"
        />
      </sc-table-select>
    </el-card>
    <div style="height:15px" />
    <el-card
      shadow="never"
      header="多选"
    >
      <sc-table-select
        v-model="value"
        :api-obj="apiObj"
        :table-width="700"
        multiple
        clearable
        collapse-tags
        collapse-tags-tooltip
        :props="props"
        @change="change"
      >
        <template #header="{form, submit}">
          <el-form
            :inline="true"
            :model="form"
          >
            <el-form-item>
              <el-select
                v-model="form.sex"
                placeholder="性别"
                clearable
                :teleported="false"
              >
                <el-option
                  label="男"
                  value="1"
                />
                <el-option
                  label="女"
                  value="2"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="form.date"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="注册时间"
                :teleported="false"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submit"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
          <el-alert
            title="自定义FORM插糟 传递了form对象和提交方法"
            type="info"
          />
        </template>
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        />
        <el-table-column
          prop="user"
          label="姓名"
          width="100"
        />
        <el-table-column
          prop="cip"
          label="最后请求IP"
          width="150"
        />
        <el-table-column
          prop="time"
          label="注册时间"
        />
      </sc-table-select>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'Tableselect',
  data() {
    return {
      apiObj: this.$API.demo.page,
      params: {
        name: 'demoName'
      },
      value: [
        {
          id: "410000199512025445",
          user: "魏磊"
        },
        {
          id: "520000198407304275",
          user: "史平"
        }
      ],
      value2: {
        id: "520000198407304275",
        user: "史平"
      },
      props: {
        label: 'user',
        value: 'id',
        keyword: "keyword"
      }
    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    //值变化
    change(val){
      this.$message('change事件，返回详情查看控制台')
      console.log(val)
    }
  }
}
</script>

<style scoped>
</style>
